<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="学生心理健康服务平台">
				<view slot="center" class="navTitle">
					学生心理健康服务平台
				</view>
			</u-navbar>
			<view class="step pd30">
				<view class="i cmp">
					<view class="ico">
						<view class="l"></view>
						<view class="t">
							01
						</view>
						<view class="l"></view>
					</view>
					<view class="p">
						选择身份
					</view>
				</view>
				<view class="i cur">
					<view class="ico">
						<view class="l"></view>
						<view class="t">
							02
						</view>
						<view class="l"></view>
					</view>
					<view class="p">
						登录认证
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView">
				<view class="loginBox">
					<view class="form">
						<view class="ft">
							{{attrType[form.userType]}}
						</view>
						<view class="line">
							<view class="ico">
								<image src="@/static/images/icon-phone.png" mode="widthFix"></image>
							</view>
							<view class="in">
								<input type="text" placeholder="请输入手机号" v-model="form.username" />
							</view>
						</view>
						
						<view class="line" v-if="form.userType==1">
							<view class="ico">
								<image src="@/static/images/icon-pwd.png" mode="widthFix"></image>
							</view>
							<view class="in">
								<input :type="showPwd?'text':'password'" placeholder="请输入密码" v-model="form.password" />
							</view>
							<view class="btn" @tap="showPwd=!showPwd">
								<view class="ic" v-show="showPwd">
									<image src="@/static/images/icon-eye-close.png" mode="widthFix"></image>
								</view>
								<view class="ic" v-show="!showPwd">
									<image src="@/static/images/icon-eye-open.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="line" v-else>
							<view class="ico">
								<image src="@/static/images/icon-safe.png" mode="widthFix"></image>
							</view>
							<view class="in">
								<input type="text" placeholder="请输入验证码" v-model="form.captcha" />
							</view>
							<view class="getbtn" @tap="getCode" :class="isSending?'gray':''">
								{{isSending?(time+'s后重新获取'):'获取验证码'}}
							</view>
						</view>
						
						
						<view class="iaggree">
							<view class="icheck" :class="isAggree?'checked':''" @tap="isAggree=!isAggree">
								<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
							</view>
							<view class="p">
								我已阅读 <navigator url="" open-type="navigate" class="a">《用户协议》</navigator> 和 <navigator
									url="" open-type="" class="a">《隐私政策》</navigator>
							</view>
						</view>
						<view class="lineBtns">
							<view class="btn act" @tap="login">
								登录
							</view>
						</view>
						<view class="other" v-if="form.userType==1">
							<view class="l"></view>
							<view class="r">
								没有账号? <navigator url="/subpage/student/register/register" class="a"
									open-type="navigate">立即注册</navigator>
							</view>
						</view>
						<view class="other" v-if="form.userType==2">
							<view class="l"></view>
							<view class="r">
								没有账号? <navigator url="/subpage/patriarch/register/register" class="a"
									open-type="navigate">立即注册</navigator>
							</view>
						</view>
					</view>
					<view class="footTip">
						<view class="loginPhone">
							<u-divider text="手机一键登录" lineColor="#e5e3dd" textSize="24rpx"
								textColor="#897f7a"></u-divider>
							<button type="default" open-type="getPhoneNumber" class="btn">
								<view class="ico">
									<image src="@/static/images/icon-phone2.png" mode="aspectFit"></image>
								</view>
							</button>
						</view>
						<view class="utip">
							<text>如遇登录问题请点击</text>
							<button type="default" open-type="contact" class="lineNav">联系客服</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSending: false,
				isAggree: false,
				timer: null,
				time: 60,
				attrType:['','','家长登录认证','老师登录认证','专家登录认证'],
				form: {
					userType: 1,
					loginType: 2,
					password:'',
					username: '15363303243',
					captcha: '9999'
				}
			}
		},
		onLoad(e) {
			if(e.type){
				this.form.userType=e.type
			}
			if(this.form.userType!=1){
				this.form.loginType=1
			}
		},
		methods: {

			login() {
				const that = this;
				if (!that.form.username) {
					that.$refs.uToast.show({
						message: '请输入手机号！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.password && that.form.loginType==2) {
					that.$refs.uToast.show({
						message: '请输入密码！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.captcha && that.form.loginType==1) {
					that.$refs.uToast.show({
						message: '请输入验证码！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				this.$api.verifyLogin(this.form, res => {
					if (res.code == 200) {
						this.dataInfo = res.data
						this.$db.set('userToken',res.data.token)
						if(res.data.schoolList && res.data.schoolList.length>0){
							
							this.$db.set('deptId',res.data.schoolList[0].id)
							this.$db.set('schoolList',res.data.schoolList)
						}
						uni.reLaunch({
							url:'/pages/home/home'
						})
					}else{
						this.$refs.uToast.show({
							message: res.message,
							type: 'warning',
							position: "top"
						});
					}
				})


				// uni.setStorage({
				// 	key: 'utype',
				// 	data: 'patriarch'
				// });
			},
			getCode() {
				const that = this;
				if (!that.form.username) {
					that.$refs.uToast.show({
						message: '请输入手机号！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (that.isSending) {
					return
				};


				that.$api.sendCode({account:that.form.username,type:1,methodType:'get'}, res => {
					if (res.code == 200) {
						
						that.isSending = true;
						//ajax
						that.timer = setInterval(function() {
							if (that.time > 1) {
								that.time--;
							} else {
								that.isSending = false;
								clearInterval(that.timer);
								that.timer = null;
								that.time = 60;
							}
						}, 1000);
					} else {
						

						that.$refs.uToast.show({
							message: res.message,
							type: 'warning',
							position: "top"
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBox {
		min-height: 100%;
		display: flex;
		padding: 40rpx 70rpx 60rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;

		.form {
			width: 100%;
			flex: 1 1 auto;
			padding-bottom: 40rpx;

			.ft {
				text-align: center;
				font-size: 36rpx;
				color: #65554d;
				margin-bottom: 40rpx;
			}

			.line {
				display: flex;
				margin-bottom: 24rpx;
				background: #fff;
				height: 90rpx;
				align-items: center;
				border-radius: 90rpx;

				.ico {
					flex: 0 0 auto;
					width: 80rpx;
					text-align: center;

					image {
						width: 24rpx;
						height: auto;
						display: block;
						margin: auto;
					}
				}

				.in {
					flex: 1 1 auto;
					overflow: hidden;

					input {
						width: 100%;
						height: 90rpx;
						display: block;
						font-size: 24rpx;
						background: none !important;
						border: none !important;
						outline: none !important;
					}
				}

				.getbtn {
					line-height: 80rpx;
					background: #ffebd4;
					color: #fe9c29;
					padding: 0 26rpx;
					border-radius: 80rpx;
					font-size: 24rpx;
					margin-right: 5rpx;
					flex: 0 0 auto;

					&.gray {
						background: none;
						color: #999;
					}
				}

				.btn {
					flex: 0 0 auto;
					width: 100rpx;
					text-align: center;

					image {
						width: 40rpx;
						display: block;
						margin: auto;
						height: auto;
					}
				}
			}

			.lineBtns {
				margin-top: 80rpx;

				.btn {
					display: block;
					line-height: 88rpx;
					border: 1rpx solid #65554d;
					border-radius: 90rpx;
					text-align: center;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					&.act {
						border-color: #fe9c29;
						background: #fe9c29;
						color: #fff;
					}
				}
			}

			.other {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #897f7a;

				navigator {
					display: inline;
					padding: 0 !important;
					margin: 0 !important;
					border: none !important;
					opacity: 1 !important;
					outline: none !important;
					background: transparent !important;
					line-height: inherit;
					overflow: visible;
					height: auto !important;
					font-size: inherit !important;

					&.a {
						color: #fe9c29;
						text-decoration: underline;
						margin-left: 10rpx !important;
					}
				}
			}
		}
	}
</style>